<template>
    <div ref="container"></div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import echarts from 'echarts';
    import {Component,Prop,Watch} from 'vue-property-decorator';


    @Component
    export default class BarChart extends Vue {
        @Prop() currentType!:string;

        barOption:object = {
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['支出', '收入'],
                right: 0,
                top: 10
            },
            grid:{
                show: false
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            color:['#5470c6', '#fac858', '#fc8452', '#9a60b4', '#ea7ccc'],
            series: [
                {
                    name: '支出',
                    type: 'bar',
                    barGap: 0,
                    emphasis: {
                        focus: 'series'
                    }
                },
                {
                    name: '收入',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    }
                }
            ]
        };

        option:object = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }]
        };

        // 0. 获取全部明细记录与当前需要的标签
        created(){
            this.$store.commit('getRecordList');
        };

        get recordList(){
            return this.$store.state.recordList;
        };

        // 1. 根据统计类型计算柱状图所需的数据
        get barData(){
            if (this.recordList.length === 0){
                return [[2021],[0],[0]];
            };

            // 1.1 统计年份
            let yearList:string[]; 
            if(this.currentType !== 'w'){
                yearList = this.recordList.filter((r:RecordItem) => r.type === this.currentType)
                    .map((r:RecordItem) => r.createdAt?.substr(0,4));
            }else {
                yearList = this.recordList.map((r:RecordItem) => r.createdAt?.substr(0,4));
            }
            yearList = Array.from(new Set(yearList));

            let expenseRecordList = this.recordList.filter((r:RecordItem) => r.type === '-');
            let incomeRecordList = this.recordList.filter((r:RecordItem) => r.type === '+');
            let expenseAmountList = [];
            let incomeAmountList = [];

            // 1.2 根据年份统计支出和收入
            for ( let i = 0 ; i< yearList.length; i++){
                let curExpList =  expenseRecordList.filter((r:RecordItem) => r.createdAt?.substr(0,4) === yearList[i]);
                if (curExpList.length === 0){
                    expenseAmountList.push(0);
                }else{
                    expenseAmountList.push(curExpList.map((r:RecordItem) => r.amount).reduce((prev:number,cur:number)=>prev+cur));
                }
                let curIncList =  incomeRecordList.filter((r:RecordItem) => r.createdAt?.substr(0,4) === yearList[i]);
                if (curIncList.length === 0){
                    incomeAmountList.push(0);
                }else{
                    incomeAmountList.push(curIncList.map((r:RecordItem) => r.amount).reduce((prev:number,cur:number)=>prev+cur));
                }
            }
            
            // 1.3 根据类型返回echart需要的数据
            if (this.currentType === 'w'){
                return [yearList,expenseAmountList,incomeAmountList];
            } else if (this.currentType === '-'){
                return [yearList,expenseAmountList];
            } else {
                return [yearList,incomeAmountList];
            }
        };

        mounted(){ 
            let container = this.$refs.container as HTMLDivElement;
            const width = document.documentElement.clientWidth;
            if(width >= 500){
                container.style.width = `${500-40}px`;
                container.style.height = `${500*0.8}px`;               
            }else {
                container.style.width = `${width-40}px`;
                container.style.height = `${width*0.75}px`;
            }
            let chart = echarts.init(container);
            chart.setOption(this.barOption);
            chart.setOption({xAxis: [{ data: this.barData[0]}],series: [{ data:this.barData[1]},{ data:this.barData[2]}]});
        };

        @Watch('barData')
        refreshChart(barData:object[]){
            let chart = echarts.init(this.$refs.container as HTMLDivElement);
            if(barData.length === 3){
                chart.setOption(this.barOption);
                chart.setOption({xAxis: [{ data: this.barData[0]}],series: [{ data:this.barData[1]},{ data:this.barData[2]}]});
            }else{
                let option:object = {
                    xAxis: {
                        type: 'category',
                        data: barData[0]
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: barData[1],
                        type: 'bar'
                    }]
                };
                chart.setOption(option,true);     
            }
        }
    }
</script>
